<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="test1_files/font_137970_p1tpzmomxp9cnmi.css">
    <link rel="mask-icon" href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#409EFF">
    <link rel="stylesheet" href="test1_files/color-brewer.css">
    <title>组件 | Element</title>
    <meta name="description" content="Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库">
  <link rel="shortcut icon" href="https://element.eleme.cn/favicon.ico"><link href="test1_files/element-ui.css" rel="stylesheet"><link href="test1_files/docs.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="test1_files/en-USesfr-FRzh-CN.css"><script async="" src="test1_files/analytics.js"></script><script charset="utf-8" src="test1_files/en-USesfr-FRzh-CN.js"></script><link rel="stylesheet" type="text/css" href="test1_files/zh-CN.css"><script charset="utf-8" src="test1_files/zh-CN.js"></script></head>
  <body class="is-component">
    <script>
      if (!window.Promise) {
        document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
      }
    </script>
    <div id="app" class="is-component"><div data-v-ad5d153c="" class="headerWrapper"><header data-v-ad5d153c="" class="header"><div data-v-ad5d153c="" class="container"><h1 data-v-ad5d153c=""><a data-v-ad5d153c="" href="#/zh-CN" class="router-link-active"><img data-v-ad5d153c="" src="" alt="element-logo" class="nav-logo"><img data-v-ad5d153c="" src="" alt="element-logo" class="nav-logo-small"></a></h1><ul data-v-ad5d153c="" class="nav"><li data-v-ad5d153c="" class="nav-item nav-algolia-search" style=""><div data-v-ad5d153c="" aria-haspopup="listbox" role="combobox" aria-owns="el-autocomplete-2673" class="el-autocomplete"><div class="el-input el-input--small"><!----><input type="text" autocomplete="off" valuekey="value" popperclass="algolia-search" placeholder="搜索文档" fetchsuggestions="function() {
    [native code]
}" debounce="300" placement="bottom-start" popperappendtobody="true" highlightfirstitem="true" class="el-input__inner" role="textbox" aria-autocomplete="list" aria-controls="id" aria-activedescendant="el-autocomplete-2673-item--1"><!----><!----><!----><!----></div><div role="region" class="el-autocomplete-suggestion el-popper algolia-search" style="display: none;"><div class="el-scrollbar"><div class="el-autocomplete-suggestion__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;"><ul class="el-scrollbar__view el-autocomplete-suggestion__list" role="listbox" id="el-autocomplete-2673"></ul></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div></div></div></div></div></li><li data-v-ad5d153c="" class="nav-item"><a data-v-ad5d153c="" href="#/zh-CN/guide" class="">指南
          </a></li><li data-v-ad5d153c="" class="nav-item"><a data-v-ad5d153c="" href="#/zh-CN/component" class="active">组件
          </a></li><li data-v-ad5d153c="" class="nav-item nav-item-theme"><a data-v-ad5d153c="" href="#/zh-CN/theme" class="">主题
          </a></li><li data-v-ad5d153c="" class="nav-item"><a data-v-ad5d153c="" href="#/zh-CN/resource" class="">资源
          </a></li><li data-v-ad5d153c="" class="nav-item" style=""><div data-v-ad5d153c="" class="nav-gap"></div></li><li data-v-ad5d153c="" class="nav-item nav-versions" style=""><div data-v-ad5d153c="" class="nav-dropdown el-dropdown"><span data-v-ad5d153c="" aria-haspopup="list" aria-controls="dropdown-menu-4437" role="button" tabindex="0" class=" el-dropdown-selfdefine">
              2.13.2
              <i data-v-ad5d153c="" class="el-icon-arrow-down el-icon--right"></i></span><ul data-v-ad5d153c="" class="el-dropdown-menu el-popper nav-dropdown-list" style="display: none;" id="dropdown-menu-4437"><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                1.4.13
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.0.11
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.1.0
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.2.2
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.3.9
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.4.11
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.5.4
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.6.3
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.7.2
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.8.2
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.9.2
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.10.1
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.11.1
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.12.0
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                2.13.2
              </li></ul></div></li><li data-v-ad5d153c="" class="nav-item lang-item"><div data-v-ad5d153c="" class="nav-dropdown nav-lang el-dropdown"><span data-v-ad5d153c="" aria-haspopup="list" aria-controls="dropdown-menu-6622" role="button" tabindex="0" class=" el-dropdown-selfdefine">
              中文
              <i data-v-ad5d153c="" class="el-icon-arrow-down el-icon--right"></i></span><ul data-v-ad5d153c="" class="el-dropdown-menu el-popper nav-dropdown-list" style="display: none;" id="dropdown-menu-6622"><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                中文
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                English
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                Español
              </li><li data-v-ad5d153c="" tabindex="-1" class="el-dropdown-menu__item"><!---->
                Français
              </li></ul></div></li></ul></div></header></div><div class="main-cnt"><div class="page-component__scroll el-scrollbar"><div class="el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;"><div class="el-scrollbar__view"><div class="page-container page-component"><div class="page-component__nav el-scrollbar"><div class="el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;"><div class="el-scrollbar__view"><div class="side-nav is-fade" style="opacity: 0.5;"><ul><li class="nav-item sponsors"><a>赞助商</a><ul class="pure-menu-list sub-nav" style="height: auto;"><li class="nav-item" style="display: none;"><a href="https://tipe.io/?ref=element" target="_blank"><img src="" alt="tipe.io"></a></li><li class="nav-item"><a href="https://www.duohui.cn/?utm_source=element&amp;utm_medium=web&amp;utm_campaign=element-index" target="_blank" class="sponsor"><img src="" alt="duohui"></a></li></ul></li><li class="nav-item"><!----><!----><a href="#/zh-CN/component/changelog" class="">更新日志</a><!----><!----></li><li class="nav-item"><!----><a href="https://elemefe.github.io/element-react/" target="_blank">Element React</a><!----><!----><!----></li><li class="nav-item"><!----><a href="https://element-angular.faas.ele.me/" target="_blank">Element Angular</a><!----><!----><!----></li><li class="nav-item"><a>开发指南</a><!----><!----><ul class="pure-menu-list sub-nav" style="height: auto;"><li class="nav-item"><a href="#/zh-CN/component/installation" class="">安装</a></li><li class="nav-item"><a href="#/zh-CN/component/quickstart" class="">快速上手</a></li><li class="nav-item"><a href="#/zh-CN/component/i18n" class="">国际化</a></li><li class="nav-item"><a href="#/zh-CN/component/custom-theme" class="">自定义主题</a></li><li class="nav-item"><a href="#/zh-CN/component/transition" class="">内置过渡动画</a></li></ul><!----></li><li class="nav-item"><a>组件</a><!----><!----><!----><div class="nav-group"><div class="nav-group__title">Basic</div><ul class="pure-menu-list" style="height: auto;"><li class="nav-item"><a href="#/zh-CN/component/layout" class="">Layout 布局</a></li><li class="nav-item"><a href="#/zh-CN/component/container" class="">Container 布局容器</a></li><li class="nav-item"><a href="#/zh-CN/component/color" class="">Color 色彩</a></li><li class="nav-item"><a href="#/zh-CN/component/typography" class="">Typography 字体</a></li><li class="nav-item"><a href="#/zh-CN/component/border" class="">Border 边框</a></li><li class="nav-item"><a href="#/zh-CN/component/icon" class="">Icon 图标</a></li><li class="nav-item"><a href="#/zh-CN/component/button" class="router-link-exact-active active">Button 按钮</a></li><li class="nav-item"><a href="#/zh-CN/component/link" class="">Link 文字链接</a></li></ul></div><div class="nav-group"><div class="nav-group__title">Form</div><ul class="pure-menu-list" style="height: auto;"><li class="nav-item"><a href="#/zh-CN/component/radio" class="">Radio 单选框</a></li><li class="nav-item"><a href="#/zh-CN/component/checkbox" class="">Checkbox 多选框</a></li><li class="nav-item"><a href="#/zh-CN/component/input" class="">Input 输入框</a></li><li class="nav-item"><a href="#/zh-CN/component/input-number" class="">InputNumber 计数器</a></li><li class="nav-item"><a href="#/zh-CN/component/select" class="">Select 选择器</a></li><li class="nav-item"><a href="#/zh-CN/component/cascader" class="">Cascader 级联选择器</a></li><li class="nav-item"><a href="#/zh-CN/component/switch" class="">Switch 开关</a></li><li class="nav-item"><a href="#/zh-CN/component/slider" class="">Slider 滑块</a></li><li class="nav-item"><a href="#/zh-CN/component/time-picker" class="">TimePicker 时间选择器</a></li><li class="nav-item"><a href="#/zh-CN/component/date-picker" class="">DatePicker 日期选择器</a></li><li class="nav-item"><a href="#/zh-CN/component/datetime-picker" class="">DateTimePicker 日期时间选择器</a></li><li class="nav-item"><a href="#/zh-CN/component/upload" class="">Upload 上传</a></li><li class="nav-item"><a href="#/zh-CN/component/rate" class="">Rate 评分</a></li><li class="nav-item"><a href="#/zh-CN/component/color-picker" class="">ColorPicker 颜色选择器</a></li><li class="nav-item"><a href="#/zh-CN/component/transfer" class="">Transfer 穿梭框</a></li><li class="nav-item"><a href="#/zh-CN/component/form" class="">Form 表单</a></li></ul></div><div class="nav-group"><div class="nav-group__title">Data</div><ul class="pure-menu-list" style="height: auto;"><li class="nav-item"><a href="#/zh-CN/component/table" class="">Table 表格</a></li><li class="nav-item"><a href="#/zh-CN/component/tag" class="">Tag 标签</a></li><li class="nav-item"><a href="#/zh-CN/component/progress" class="">Progress 进度条</a></li><li class="nav-item"><a href="#/zh-CN/component/tree" class="">Tree 树形控件</a></li><li class="nav-item"><a href="#/zh-CN/component/pagination" class="">Pagination 分页</a></li><li class="nav-item"><a href="#/zh-CN/component/badge" class="">Badge 标记</a></li><li class="nav-item"><a href="#/zh-CN/component/avatar" class="">Avatar 头像</a></li></ul></div><div class="nav-group"><div class="nav-group__title">Notice</div><ul class="pure-menu-list" style="height: auto;"><li class="nav-item"><a href="#/zh-CN/component/alert" class="">Alert 警告</a></li><li class="nav-item"><a href="#/zh-CN/component/loading" class="">Loading 加载</a></li><li class="nav-item"><a href="#/zh-CN/component/message" class="">Message 消息提示</a></li><li class="nav-item"><a href="#/zh-CN/component/message-box" class="">MessageBox 弹框</a></li><li class="nav-item"><a href="#/zh-CN/component/notification" class="">Notification 通知</a></li></ul></div><div class="nav-group"><div class="nav-group__title">Navigation</div><ul class="pure-menu-list" style="height: auto;"><li class="nav-item"><a href="#/zh-CN/component/menu" class="">NavMenu 导航菜单</a></li><li class="nav-item"><a href="#/zh-CN/component/tabs" class="">Tabs 标签页</a></li><li class="nav-item"><a href="#/zh-CN/component/breadcrumb" class="">Breadcrumb 面包屑</a></li><li class="nav-item"><a href="#/zh-CN/component/page-header" class="">PageHeader 页头</a></li><li class="nav-item"><a href="#/zh-CN/component/dropdown" class="">Dropdown 下拉菜单</a></li><li class="nav-item"><a href="#/zh-CN/component/steps" class="">Steps 步骤条</a></li></ul></div><div class="nav-group"><div class="nav-group__title">Others</div><ul class="pure-menu-list" style="height: auto;"><li class="nav-item"><a href="#/zh-CN/component/dialog" class="">Dialog 对话框</a></li><li class="nav-item"><a href="#/zh-CN/component/tooltip" class="">Tooltip 文字提示</a></li><li class="nav-item"><a href="#/zh-CN/component/popover" class="">Popover 弹出框</a></li><li class="nav-item"><a href="#/zh-CN/component/popconfirm" class="">Popconfirm 气泡确认框</a></li><li class="nav-item"><a href="#/zh-CN/component/card" class="">Card 卡片</a></li><li class="nav-item"><a href="#/zh-CN/component/carousel" class="">Carousel 走马灯</a></li><li class="nav-item"><a href="#/zh-CN/component/collapse" class="">Collapse 折叠面板</a></li><li class="nav-item"><a href="#/zh-CN/component/timeline" class="">Timeline 时间线</a></li><li class="nav-item"><a href="#/zh-CN/component/divider" class="">Divider 分割线</a></li><li class="nav-item"><a href="#/zh-CN/component/calendar" class="">Calendar 日历</a></li><li class="nav-item"><a href="#/zh-CN/component/image" class="">Image 图片</a></li><li class="nav-item"><a href="#/zh-CN/component/backtop" class="">Backtop 回到顶部</a></li><li class="nav-item"><a href="#/zh-CN/component/infiniteScroll" class="">InfiniteScroll 无限滚动</a></li><li class="nav-item"><a href="#/zh-CN/component/drawer" class="">Drawer 抽屉</a></li></ul></div></li></ul></div></div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height: 15.6808%; transform: translateY(169.247%);"></div></div></div><div class="page-component__content"><section class="content element-doc content"><h2 id="button-an-niu"><a href="https://element.eleme.cn/#/zh-CN/component/button#button-an-niu" aria-hidden="true" class="header-anchor">¶</a> Button 按钮</h2><p>常用的操作按钮。</p><h3 id="ji-chu-yong-fa"><a href="https://element.eleme.cn/#/zh-CN/component/button#ji-chu-yong-fa" aria-hidden="true" class="header-anchor">¶</a> 基础用法</h3><p>基础的按钮用法。</p><div class="demo-block demo-zh-CN demo-button hover"><div class="source"><div><div class="el-row"><button type="button" class="el-button el-button--default"><!----><!----><span>默认按钮</span></button> <button type="button" class="el-button el-button--primary"><!----><!----><span>主要按钮</span></button> <button type="button" class="el-button el-button--success"><!----><!----><span>成功按钮</span></button> <button type="button" class="el-button el-button--info"><!----><!----><span>信息按钮</span></button> <button type="button" class="el-button el-button--warning"><!----><!----><span>警告按钮</span></button> <button type="button" class="el-button el-button--danger"><!----><!----><span>危险按钮</span></button></div> <div class="el-row"><button type="button" class="el-button el-button--default is-plain"><!----><!----><span>朴素按钮</span></button> <button type="button" class="el-button el-button--primary is-plain"><!----><!----><span>主要按钮</span></button> <button type="button" class="el-button el-button--success is-plain"><!----><!----><span>成功按钮</span></button> <button type="button" class="el-button el-button--info is-plain"><!----><!----><span>信息按钮</span></button> <button type="button" class="el-button el-button--warning is-plain"><!----><!----><span>警告按钮</span></button> <button type="button" class="el-button el-button--danger is-plain"><!----><!----><span>危险按钮</span></button></div> <div class="el-row"><button type="button" class="el-button el-button--default is-round"><!----><!----><span>圆角按钮</span></button> <button type="button" class="el-button el-button--primary is-round"><!----><!----><span>主要按钮</span></button> <button type="button" class="el-button el-button--success is-round"><!----><!----><span>成功按钮</span></button> <button type="button" class="el-button el-button--info is-round"><!----><!----><span>信息按钮</span></button> <button type="button" class="el-button el-button--warning is-round"><!----><!----><span>警告按钮</span></button> <button type="button" class="el-button el-button--danger is-round"><!----><!----><span>危险按钮</span></button></div> <div class="el-row"><button type="button" class="el-button el-button--default is-circle"><!----><i class="el-icon-search"></i><!----></button> <button type="button" class="el-button el-button--primary is-circle"><!----><i class="el-icon-edit"></i><!----></button> <button type="button" class="el-button el-button--success is-circle"><!----><i class="el-icon-check"></i><!----></button> <button type="button" class="el-button el-button--info is-circle"><!----><i class="el-icon-message"></i><!----></button> <button type="button" class="el-button el-button--warning is-circle"><!----><i class="el-icon-star-off"></i><!----></button> <button type="button" class="el-button el-button--danger is-circle"><!----><i class="el-icon-delete"></i><!----></button></div></div></div><div class="meta" style="height: 879px;"><div class="description"><div><p>使用<code>type</code>、<code>plain</code>、<code>round</code>和<code>circle</code>属性来定义 Button 的样式。</p></div></div><div class="highlight"><pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span>&gt;</span>默认按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>&gt;</span>主要按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span>&gt;</span>成功按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span>&gt;</span>信息按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span>&gt;</span>警告按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span>&gt;</span>危险按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">el-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">plain</span>&gt;</span>朴素按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">plain</span>&gt;</span>主要按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">plain</span>&gt;</span>成功按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span> <span class="hljs-attr">plain</span>&gt;</span>信息按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span> <span class="hljs-attr">plain</span>&gt;</span>警告按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">plain</span>&gt;</span>危险按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">el-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">round</span>&gt;</span>圆角按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">round</span>&gt;</span>主要按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">round</span>&gt;</span>成功按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span> <span class="hljs-attr">round</span>&gt;</span>信息按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span> <span class="hljs-attr">round</span>&gt;</span>警告按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">round</span>&gt;</span>危险按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">el-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-search"</span> <span class="hljs-attr">circle</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-edit"</span> <span class="hljs-attr">circle</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-check"</span> <span class="hljs-attr">circle</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-message"</span> <span class="hljs-attr">circle</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-star-off"</span> <span class="hljs-attr">circle</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-delete"</span> <span class="hljs-attr">circle</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</code></pre></div></div><div class="demo-block-control is-fixed" style="left: 340.5px;"><i class="el-icon-caret-top hovering"></i><span style="" class="text-slide-enter-active text-slide-enter-to">隐藏代码</span><button type="button" class="el-button control-button el-tooltip el-button--text el-button--small" style="" aria-describedby="el-tooltip-4085" tabindex="0"><!----><!----><span>
          在线运行
        </span></button></div></div><h3 id="jin-yong-zhuang-tai"><a href="https://element.eleme.cn/#/zh-CN/component/button#jin-yong-zhuang-tai" aria-hidden="true" class="header-anchor">¶</a> 禁用状态</h3><p>按钮不可用状态。</p><div class="demo-block demo-zh-CN demo-button"><div class="source"><div><div class="el-row"><button disabled="disabled" type="button" class="el-button el-button--default is-disabled"><!----><!----><span>默认按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--primary is-disabled"><!----><!----><span>主要按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--success is-disabled"><!----><!----><span>成功按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--info is-disabled"><!----><!----><span>信息按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--warning is-disabled"><!----><!----><span>警告按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--danger is-disabled"><!----><!----><span>危险按钮</span></button></div> <div class="el-row"><button disabled="disabled" type="button" class="el-button el-button--default is-disabled is-plain"><!----><!----><span>朴素按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--primary is-disabled is-plain"><!----><!----><span>主要按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--success is-disabled is-plain"><!----><!----><span>成功按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--info is-disabled is-plain"><!----><!----><span>信息按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--warning is-disabled is-plain"><!----><!----><span>警告按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--danger is-disabled is-plain"><!----><!----><span>危险按钮</span></button></div></div></div><div class="meta"><div class="description"><div><p>你可以使用<code>disabled</code>属性来定义按钮是否可用，它接受一个<code>Boolean</code>值。</p></div></div><div class="highlight"><pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">disabled</span>&gt;</span>默认按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">disabled</span>&gt;</span>主要按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">disabled</span>&gt;</span>成功按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span> <span class="hljs-attr">disabled</span>&gt;</span>信息按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span> <span class="hljs-attr">disabled</span>&gt;</span>警告按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">disabled</span>&gt;</span>危险按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">el-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">disabled</span>&gt;</span>朴素按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">disabled</span>&gt;</span>主要按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">disabled</span>&gt;</span>成功按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"info"</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">disabled</span>&gt;</span>信息按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"warning"</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">disabled</span>&gt;</span>警告按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">disabled</span>&gt;</span>危险按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</code></pre></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span style="display: none;">显示代码</span><button type="button" class="el-button control-button el-tooltip el-button--text el-button--small" style="display: none;" aria-describedby="el-tooltip-7755" tabindex="0"><!----><!----><span>
          在线运行
        </span></button></div></div><h3 id="wen-zi-an-niu"><a href="https://element.eleme.cn/#/zh-CN/component/button#wen-zi-an-niu" aria-hidden="true" class="header-anchor">¶</a> 文字按钮</h3><p>没有边框和背景色的按钮。</p><div class="demo-block demo-zh-CN demo-button"><div class="source"><div><button type="button" class="el-button el-button--text"><!----><!----><span>文字按钮</span></button> <button disabled="disabled" type="button" class="el-button el-button--text is-disabled"><!----><!----><span>文字按钮</span></button></div></div><div class="meta"><!----><div class="highlight" style="width: 100%;"><pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>&gt;</span>文字按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">disabled</span>&gt;</span>文字按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
</code></pre></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span style="display: none;">显示代码</span><button type="button" class="el-button control-button el-tooltip el-button--text el-button--small" style="display: none;" aria-describedby="el-tooltip-3428" tabindex="0"><!----><!----><span>
          在线运行
        </span></button></div></div><h3 id="tu-biao-an-niu"><a href="https://element.eleme.cn/#/zh-CN/component/button#tu-biao-an-niu" aria-hidden="true" class="header-anchor">¶</a> 图标按钮</h3><p>带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。</p><div class="demo-block demo-zh-CN demo-button"><div class="source"><div><button type="button" class="el-button el-button--primary"><!----><i class="el-icon-edit"></i><!----></button> <button type="button" class="el-button el-button--primary"><!----><i class="el-icon-share"></i><!----></button> <button type="button" class="el-button el-button--primary"><!----><i class="el-icon-delete"></i><!----></button> <button type="button" class="el-button el-button--primary"><!----><i class="el-icon-search"></i><span>搜索</span></button> <button type="button" class="el-button el-button--primary"><!----><!----><span>上传<i class="el-icon-upload el-icon--right"></i></span></button></div></div><div class="meta"><div class="description"><div><p>设置<code>icon</code>属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用<code>i</code>标签即可，可以使用自定义图标。</p></div></div><div class="highlight"><pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-share"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-delete"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-search"</span>&gt;</span>搜索<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>&gt;</span>上传<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-icon-upload el-icon--right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
</code></pre></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span style="display: none;">显示代码</span><button type="button" class="el-button control-button el-tooltip el-button--text el-button--small" style="display: none;" aria-describedby="el-tooltip-3458" tabindex="0"><!----><!----><span>
          在线运行
        </span></button></div></div><h3 id="an-niu-zu"><a href="https://element.eleme.cn/#/zh-CN/component/button#an-niu-zu" aria-hidden="true" class="header-anchor">¶</a> 按钮组</h3><p>以按钮组的方式出现，常用于多项类似操作。</p><div class="demo-block demo-zh-CN demo-button"><div class="source"><div><div class="el-button-group"><button type="button" class="el-button el-button--primary"><!----><i class="el-icon-arrow-left"></i><span>上一页</span></button> <button type="button" class="el-button el-button--primary"><!----><!----><span>下一页<i class="el-icon-arrow-right el-icon--right"></i></span></button></div> <div class="el-button-group"><button type="button" class="el-button el-button--primary"><!----><i class="el-icon-edit"></i><!----></button> <button type="button" class="el-button el-button--primary"><!----><i class="el-icon-share"></i><!----></button> <button type="button" class="el-button el-button--primary"><!----><i class="el-icon-delete"></i><!----></button></div></div></div><div class="meta" style="height: 317px;"><div class="description"><div><p>使用<code>&lt;el-button-group&gt;</code>标签来嵌套你的按钮。</p></div></div><div class="highlight"><pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-button-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-arrow-left"</span>&gt;</span>上一页<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>&gt;</span>下一页<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-icon-arrow-right el-icon--right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-button-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">el-button-group</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-share"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"el-icon-delete"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-button-group</span>&gt;</span>
</code></pre></div></div><div class="demo-block-control" style="left: 0px;"><i class="el-icon-caret-top"></i><span style="display: none;">隐藏代码</span><button type="button" class="el-button control-button el-tooltip el-button--text el-button--small" style="" aria-describedby="el-tooltip-7581" tabindex="0"><!----><!----><span>
          在线运行
        </span></button></div></div><h3 id="jia-zai-zhong"><a href="https://element.eleme.cn/#/zh-CN/component/button#jia-zai-zhong" aria-hidden="true" class="header-anchor">¶</a> 加载中</h3><p>点击按钮后进行数据加载操作，在按钮上显示加载状态。</p><div class="demo-block demo-zh-CN demo-button"><div class="source"><div><button disabled="disabled" type="button" class="el-button el-button--primary is-loading"><i class="el-icon-loading"></i><!----><span>加载中</span></button></div></div><div class="meta"><div class="description"><div><p>要设置为 loading 状态，只要设置<code>loading</code>属性为<code>true</code>即可。</p></div></div><div class="highlight"><pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">:loading</span>=<span class="hljs-string">"true"</span>&gt;</span>加载中<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
</code></pre></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span style="display: none;">显示代码</span><button type="button" class="el-button control-button el-tooltip el-button--text el-button--small" style="display: none;" aria-describedby="el-tooltip-2537" tabindex="0"><!----><!----><span>
          在线运行
        </span></button></div></div><h3 id="bu-tong-chi-cun"><a href="https://element.eleme.cn/#/zh-CN/component/button#bu-tong-chi-cun" aria-hidden="true" class="header-anchor">¶</a> 不同尺寸</h3><p>Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</p><div class="demo-block demo-zh-CN demo-button"><div class="source"><div><div class="el-row"><button type="button" class="el-button el-button--default"><!----><!----><span>默认按钮</span></button> <button type="button" class="el-button el-button--default el-button--medium"><!----><!----><span>中等按钮</span></button> <button type="button" class="el-button el-button--default el-button--small"><!----><!----><span>小型按钮</span></button> <button type="button" class="el-button el-button--default el-button--mini"><!----><!----><span>超小按钮</span></button></div> <div class="el-row"><button type="button" class="el-button el-button--default is-round"><!----><!----><span>默认按钮</span></button> <button type="button" class="el-button el-button--default el-button--medium is-round"><!----><!----><span>中等按钮</span></button> <button type="button" class="el-button el-button--default el-button--small is-round"><!----><!----><span>小型按钮</span></button> <button type="button" class="el-button el-button--default el-button--mini is-round"><!----><!----><span>超小按钮</span></button></div></div></div><div class="meta"><div class="description"><div><p>额外的尺寸：<code>medium</code>、<code>small</code>、<code>mini</code>，通过设置<code>size</code>属性来配置它们。</p></div></div><div class="highlight"><pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">el-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span>&gt;</span>默认按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"medium"</span>&gt;</span>中等按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"small"</span>&gt;</span>小型按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"mini"</span>&gt;</span>超小按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">el-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">round</span>&gt;</span>默认按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"medium"</span> <span class="hljs-attr">round</span>&gt;</span>中等按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"small"</span> <span class="hljs-attr">round</span>&gt;</span>小型按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"mini"</span> <span class="hljs-attr">round</span>&gt;</span>超小按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</code></pre></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span style="display: none;">显示代码</span><button type="button" class="el-button control-button el-tooltip el-button--text el-button--small" style="display: none;" aria-describedby="el-tooltip-4173" tabindex="0"><!----><!----><span>
          在线运行
        </span></button></div></div><h3 id="attributes"><a href="https://element.eleme.cn/#/zh-CN/component/button#attributes" aria-hidden="true" class="header-anchor">¶</a> Attributes</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>size</td><td>尺寸</td><td>string</td><td>medium / small / mini</td><td>—</td></tr><tr><td>type</td><td>类型</td><td>string</td><td>primary / success / warning / danger / info / text</td><td>—</td></tr><tr><td>plain</td><td>是否朴素按钮</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>round</td><td>是否圆角按钮</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>circle</td><td>是否圆形按钮</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>loading</td><td>是否加载中状态</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>disabled</td><td>是否禁用状态</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>icon</td><td>图标类名</td><td>string</td><td>—</td><td>—</td></tr><tr><td>autofocus</td><td>是否默认聚焦</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>native-type</td><td>原生 type 属性</td><td>string</td><td>button / submit / reset</td><td>button</td></tr></tbody></table></section><div class="footer-nav"><span class="footer-nav-link footer-nav-left"><i class="el-icon-arrow-left"></i>
    Icon 图标
  </span><span class="footer-nav-link footer-nav-right">
    Link 文字链接
    <i class="el-icon-arrow-right"></i></span></div></div><div class="el-backtop" style="right: 100px; bottom: 150px;"><i class="el-icon-caret-top"></i></div></div></div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height: 10.5995%; transform: translateY(152.688%);"></div></div></div></div><!----></div>
    
      <script src="test1_files/vue.js"></script>
      <script src="test1_files/vue-router.js"></script>
      <script src="test1_files/highlight.js"></script>
    
  <script type="text/javascript" src="test1_files/element-ui.js"></script><script type="text/javascript" src="test1_files/docs.js"></script><div data-v-3285c94c="" class="progress" style="width: 0%; height: 2px; background-color: rgb(64, 158, 255); opacity: 0;"></div>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-84335471-1', 'auto');
    ga('send', 'pageview');

    window.addEventListener('hashchange', function () {
      ga('set', 'page', window.location.href);
      ga('send', 'pageview');
    });
  </script>
  

</body></html>